
<template>
  <div class="bh-container">
    <a-row justify="space-between" align="center" class="header page_header">
      <a-space wrap>
        <div class="title">字典管理</div>
      </a-space>
    </a-row>
    <a-row align="stretch"  class="bh-h-full page_content" style="padding: 15px">
    <!--字典项-->
      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="260px" class="bh-h-full bh-ov-hidden">
        <DictTree @node-click="handleSelectDict"></DictTree>
      </a-col>
      <!--字典值-->
      <a-col :xs="0" :sm="8" :md="7" :lg="6" :xl="5" :xxl="4" flex="1" class="bh-h-full bh-ov-hidden">
        <BhTable
            row-key="id"
            :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
            :data="dataList as []"
            :columns="columns"
            @refresh="search"
            :loading="loading"
            :pagination="pagination"
        >
          <template #toolbar-left>

            <a-input v-model="queryForm.name" placeholder="搜索名称" allow-clear />
            <a-input v-model="queryForm.code" placeholder="搜索值" allow-clear  />
            <a-space >
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                {{ $t('common.search') }}
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                {{ $t('common.reset') }}
              </a-button>
            </a-space>
          </template>
          <template #toolbar-right>
            <a-button v-permission="['sys:dict:data:add']" type="primary" @click="AddRow">
              <template #icon><icon-plus /></template>
              <template #default>  {{ $t('common.create') }}</template>
            </a-button>
          </template>
          <!-- 操作 -->
          <template #handle="{ record }">
            <!-- 修改 -->
            <a-button
                v-permission="['sys:dict:data:edit']"
                type="text"
                size="mini"
                @click="UpdateRow(record)"
            >
              修改
            </a-button>
            <!-- 删除 -->
            <a-button
                v-permission="['sys:dict:data:delete']"
                type="text"
                size="mini"
                status="danger"
                @click="deleteRow(record)"
            >
              删除
            </a-button>
          </template>
        </BhTable>
      </a-col>
    </a-row>
    <DictDataFrom ref="ModalRef" @restart="reset" />
  </div>

</template>
<script setup lang="ts">
import DictTree from './components/tree/index.vue'// 根据选中字典查询
import { useTable } from '@/hooks/modules/useTable'
import type { TableInstanceColumns } from '@/components/BhTable'
import {  type QueryRequest, type QueryResponse, getList,deleteRows } from '@/api/system/dictData'
import {formatDate, isMobile} from '@/utils'
import DictDataFrom from "./components/data/from.vue";
const queryForm = reactive<QueryRequest>({
  dictId: 0,
  name:'',
  code:'',
})
const {
  tableData: dataList,
  loading,
  pagination,
  search,
  handleDelete,
} = useTable((page) => getList({ ...queryForm, ...page }), { immediate: false })

const columns: TableInstanceColumns[] = [
  {
    title: '序号',
    width: 66,
    align: 'center',
    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
  },
  { title: '字典项名称', dataIndex: 'name',  minWidth: 100, align: 'center',ellipsis: true, tooltip: true },
  { title: '字典项值', dataIndex: 'code', minWidth: 100, align: 'center', ellipsis: true, tooltip: true },
  { title: '排序',dataIndex: 'sort', align: 'center',sortable: {sortDirections: ['ascend', 'descend']}},
  { title: '备注', dataIndex: 'note', minWidth: 130, ellipsis: true, tooltip: true },
  { title: '创建时间', dataIndex: 'create_time', ellipsis: true, tooltip: true ,width: 180 },
  { title: '修改时间', dataIndex: 'update_time', width: 180, ellipsis: true, tooltip: true  },
  { title: '操作',dataIndex: 'handle', slotName: 'handle', width: 130,align: 'center', fixed: !isMobile() ? 'right' : undefined},
]
const handleSelectDict = (keys: Array<any>) => {
  queryForm.dictId = keys.length === 1 ? keys[0] : undefined
  search()
}

// 重置
const reset = () => {
  queryForm.name = undefined
  queryForm.code = undefined
  search()
}
// 删除
const deleteRow = (record: QueryResponse) => {
  return handleDelete(() => deleteRows(record.id), {
    content: `是否确定删除字典项「${record.name}」？`,
    showModal: true,
  })
}

const ModalRef = ref()
// 新增
const AddRow = () => {
  ModalRef.value?.openAdd(queryForm.dictId)
}
// 修改
const UpdateRow = (record: QueryResponse) => {
  ModalRef.value?.openUpdate(record)
}


</script>

<style scoped lang="less">
:deep(.general-card){
  padding: 0 !important;
}
:deep(.arco-card-body){
  padding: 0 !important;
}
</style>